<template>
	<view class="container">
		<view class="header">
			出行车型
		</view>
		<swiper class="swiper" :autoplay="false" :interval="3000" :duration="1000" :current="swiperCurrent"
			:style="{height:`${swiperHeight}rpx`}" @change="changeSwiper">
			<swiper-item class="item" v-for="(item, index) in vehicleTypeInfo" :key="index" >
				<view class="card" >
					<image
						:src="imageUrl + item.vehicle_image"
						mode="aspectFill"></image>
					<view class="card-rt">
						<text class="first">{{item.vehicle_name}}</text>
						<text class="second">{{item.vehicle_type}}</text>
						<text class="third">{{item.vehicle_desc}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 轮播指示点样式修改 -->
		<view class="dots">
			<block v-for="(item,index) in vehicleTypeInfo.length" :key="item">
				<view class="dot" :class="index==swiperCurrent ? ' dot-active' : ''"></view>
			</block>
		</view>
	</view>
	<view class="footer-text">
		<view class="text-card">
			<text>温馨提示</text>
			<view>
				以上车型是油车/电车/油电混动三类,不可指定
			</view>
		</view>
		<view class="text-card">
			<text>承载说明</text>
			<view class="tips">
				<view>
					1.拼车具体车型根据当天出行人数确定，不可指定
				</view>
				<view>
					2.每人限带一个行李箱，不超过22寸，合用不超过24寸
				</view>
				<view>
					3.不同车型承载力不同，具体咨询客服
				</view>
				<view>
					4.若出行行李较多，行李箱较大，建议包车
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import { imageUrl } from '../../../config/request/request';
	const swiperHeight = ref(240)
	const swiperCurrent = ref(0)
	const props = defineProps({
		vehicleTypeInfo: {
			type: Array,
			default:[]
		}
	})
	const emits = defineEmits([])

	const changeSwiper = (e) => {
		swiperCurrent.value = e.detail.current
	}
</script>

<style scoped>
	.container {
		font-family: "仓耳渔阳体 W05";
		padding: 10rpx 20rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.active {
		border: 2rpx solid #044bad;
		border-radius: 20rpx;
	}

	.header {
		font-size: 34rpx;
	}

	.swiper {
		padding: 0 30rpx;
		box-sizing: border-box;
		margin: 20rpx 0;
	}

	.item {
		border-radius: 20rpx;
	}

	.card {
		border-radius: 20rpx;
		background-color: #fcfcfc;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0 10rpx;
	}

	.card image {
		width: 300rpx;
		height: 200rpx;
	}

	.card-rt {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 42%;
	}

	.card-rt .first {
		font-size: 32rpx;
		color: rgba(0, 0, 0, 1);
	}

	.card-rt .second {
		font-size: 32rpx;
		color: rgba(85, 107, 47, 1);
	}

	.card-rt .third {
		font-size: 24rpx;
		color: rgba(71, 71, 71, 1);
	}

	.dots {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		z-index: 8;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.dot {
		border-radius: 10rpx;
		width: 16rpx;
		height: 16rpx;
		transition: all .6s;
		background: rgba(0, 0, 0, .3);
		margin-right: 10rpx;

	}

	.dot-active {
		border-radius: 10rpx;
		width: 60rpx;
		height: 10rpx;
		/* background: rgba(255, 255, 255, .8); */
	}

	.footer-text {
		font-family: "仓耳渔阳体 W05";
		padding: 0 20rpx;
	}

	.footer-text text {
		font-size: 32rpx;
		white-space: nowrap;
	}

	.text-card {
		margin-top: 20rpx;
		display: flex;
		font-size: 24rpx;
		color: rgba(125, 125, 125, 1);
		gap: 40rpx;

	}

	.text-card>view {
		font-size: 24rpx;
		color: rgba(125, 125, 125, 1);
		margin: 10rpx 0 10rpx 0rpx;
	}

	.tips {
		display: flex;
		flex-direction: column;
		gap: 18rpx;
	}
</style>